<template>
	<view class="selfGet">
		<view class="top_box">
			<view class="cur_address_box">
				<span class="fn-sz-26 fn-cl-333333">当前定位：{{ addressObj.address }}</span>
			</view>
			<view class="change_address_btn" @tap="openMap">
				<span class="fn-sz-26 fn-cl-666666 mar-right-8">切换地址</span>
				<image class="icon-26" src="../../static/images/icon/icon_moer_btn.png" mode=""></image>
			</view>
		</view>
		<view class="nearby_address_list">
			<view class="fn-sz-30 fn-cl-333333 mar-bottom-30">附近自提点</view>
			<view class="nearby_address_list_box">
				<view class="nearby_address_item" v-for="item in teamListObj.lists" :key="item.id"
					@tap="chooseAddress(item)">
					<view class="nearby_item_img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="nearby_info">
						<view class="nearby_info_left">
							<view class="fn-sz-30 fn-cl-333333 mar-bottom-18">{{ item.name }}</view>
							<view class="fn-sz-26 fn-cl-666666">{{ item.city }}{{ item.county }}{{ item.address }}
							</view>
						</view>
						<view class="address_distance">
							<span class="fn-sz-26 fn-cl-666666">{{ item.distance }}</span>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadMoreStatus" v-if="teamListObj.lists.length" />
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import com from '../../mixin/index.js';
	export default {
		mixins: [com],
		data() {
			return {
				addressObj: {
					address: '',
					latitude: '',
					longitude: ''
				},
				page: {
					page: 1,
					page_size: 12
				},
				teamListObj: {
					lists: [],
					total: 1,
					total_page: 0
				},
				loadMoreStatus: 'loadmore'
			};
		},
		onLoad() {
			qqmapsdk = new QQMapWX({
				key: 'LPPBZ-KHRKX-U5K4E-ZLQSE-6SZJZ-KDBKQ' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
			});
			this.getUserLocation();
		},
		onPullDownRefresh() {
			this.teamListObj = {
				lists: [],
				total: 1,
				total_page: 0
			};
			this.page.page = 1;
			this.getTeamList();
		},
		onReachBottom() {
			this.getTeamList(1);
		},
		methods: {
			openMap() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.teamListObj = {
							lists: [],
							total: 1,
							total_page: 0
						};
						that.page.page = 1;
						that.getLocal(res.latitude, res.longitude);
					}
				});
			},
			getUserLocation() {
				let that = this;
				uni.getFuzzyLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					geocode: true, //是否解析地址
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						console.log(res, '当前定位');
						that.getLocal(latitude, longitude);
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			// 获取当前地理位置
			getLocal(latitude, longitude) {
				let that = this;
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: res => {
						that.addressObj.address = res.result.address;
						that.addressObj.latitude = latitude;
						that.addressObj.longitude = longitude;
						uni.setStorageSync('address', that.addressObj);
						//获取到地址信息后请求自提点列表
						that.getTeamList();
					},
					fail: res => {
						console.log(res);
					},
					complete: res => {}
				});
			},
			getTeamList() {
				const {
					latitude,
					longitude
				} = this.addressObj;
				let params = {
					...this.page,
					latitude,
					longitude
				};
				this.getList('teamListObj', 'getTeamList', 'page', params).then(res => {
					uni.stopPullDownRefresh()
				});
			},
			//设置自提点位置
			chooseAddress(val) {
				val.full_address = val.province + val.city + val.county + val.address;
				uni.setStorageSync('cur_address_point', val);
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.initGoodsList(); // 給上一頁綁定方法otherFun,傳參object
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.selfGet {
		.top_box {
			background-color: #f9f9f9;
			padding: 20rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cur_address_box {
				flex: none;
				width: 80%;
			}

			.change_address_btn {
				flex: none;
				display: flex;
				align-items: center;
			}
		}

		.nearby_address_list {
			background: #ffffff;
			padding: 31rpx 24rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.nearby_address_item {
				display: flex;
				margin-bottom: 40rpx;

				.nearby_item_img {
					margin-right: 20rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}

				.nearby_info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;

					.nearby_info_left {}

					.address_distance {}
				}
			}
		}
	}
</style>